<template>
	<div class="wrap">
		<div class="title">{{ title }}</div>
		<div class="progress-wrapper" v-for="(item, index) in sortedChartData" :key="index">
			<span class="index-square" :style="getIndexStyle(index)">{{ index + 1 }}</span>
			<div class="progress-container">
				<div class="progress-text">
					<span class="label">{{ item.Name }}</span>
					<span class="percentage">{{ item.Count }}</span>
				</div>
				<el-progress :percentage="getPercentage(item.Count)" :stroke-width="4" :show-text="false"
					:style="getProgressStyle(index)" />
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'CustomProgressBar',
	props: {
		title: {
			type: String,
			default: '资产排行(Top 10)'
		},
		chartData: {
			type: Array,
			default: () => [],
			required: true
		}
	},
	computed: {
		sortedChartData() {
			return [...this.chartData].sort((a, b) => b.Count - a.Count)
			.slice(0, 10); // 只取前10条数据;
		},
		maxCount() {
			return Math.max(...this.sortedChartData.map(item => item.Count));
		}
	},
	methods: {
		getPercentage(count) {
			if (this.maxCount === 0) return 0;
			return Math.round((count / this.maxCount ) * 100);
		},
		getProgressStyle(index) {
			const colors = [
				'#ff7734',  // 第一名
				'#ffc700',  // 第二名
				'#e0a449'  // 第三名
			];
			const defaultColor = '#3fd190';  // 其他名次
			const backgroundColor = index < 3 ? colors[index] : defaultColor;

			return {
				width: '100%',
				'--el-progress-bar-color': backgroundColor
			};
		},
		getIndexStyle(index) {
			const colors = [
				'#ff7734',  // 第一名
				'#ffc700',  // 第二名
				'#e0a449'  // 第三名
			];
			const defaultColor = '#3fd190';  // 其他名次
			const backgroundColor = index < 3 ? colors[index] : defaultColor;

			return {
				backgroundColor: backgroundColor
			};
		}
	}
}
</script>

<style lang="scss" scoped>
.wrap {
	height: calc(50vh - 40px);
	overflow: hidden;
	background: #fff;
	border-radius: 6px;
	padding: 10px 24px 14px;
	margin: 0 auto;
	.title{
		font-size: 16px;
		margin-bottom: 10px;
	}

	.progress-wrapper {
		display: flex;
		align-items: center;
		padding: 5px;
	}

	.index-square {
		color: white;
		width: 20px;
		height: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		/* 去掉圆角，保持方形 */
	}

	.label {
		color: #525252;
		font-size: 14px;
	}

	.progress-container {
		flex-grow: 1;
		margin-left: 8px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
	}

	.progress-text {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-bottom: 4px;
	}

	.percentage {
		color: #525252;
		font-size: 14px;
	}

	::v-deep .el-progress-bar__outer {
		background-color: #E5E9F2;
	}

	::v-deep .el-progress-bar__inner {
		background: var(--el-progress-bar-color);
	}
}
</style>